（四）Vue 路由—— Vue Router

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 8k | 阅读时长 ≈ 11 分钟

  学习 Vue 的路由之前，需要先了解下什么是路由。

什么是路由？

  路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。

  对网页中的路由来说，即浏览器访问一个网站 URL 时相关导向的页面。
  这些页面导向的设置根据前端发展历程其决定角色也不同：

  • 前后端未分离阶段：后端提供数据的同时还要设置 URL 和页面之间的映射关系
  • 前后端分离阶段：后端只提供接口数据，页面由前端渲染
  • SPA 页面阶段：整个网页只有一个 html 页面，内部页面由前端路由管理

  下面，对这 3 个阶段具体分析一下下。

前后端发展的 3 个阶段

前后端未分离阶段（后端路由）

  在早期的网站开发中：服务器直接负责渲染 HTML 页面，然后返回给前端展示。
  一个页面对应一个网址（URL），服务器会进行如下处理：

  • 当 URL 发送给服务器，其会通过相关正则匹配，交给一个 Controller 进行各种处理
  • Controller 处理完成后，最终生成相关数据或（并）设置跳转页面，后端渲染返回给前端

缺点

  该操作方式即后端路由，但其存在如下缺点：

  • 开发难度大，所有页面的数据和跳转关系都由后端人员来编写和维护
  • 前端人员若要开发页面，必须学习 Java 和 PHP 等语言
  • 数据和页面的绑定极不利于编写和维护

前后端分离阶段

  随着 Ajax 技术的出现，用前后端分离的方式开发项目变得越来越流行，
  此时，后端只需提供 API 接口来返回数据，前端使用 Ajax 获取数据，再通过 JS 将数据渲染到页面中。

优点

  该方式的优点：

  • 前后端责任清晰：后端专注于处理数据，前端专注于交互和可视化
  • 若移动端项目（IOS/Android）需要，后端不需要进行任何处理，使用原先的 API 接口即可
  • 大多网站目前仍在使用

SPA 页面阶段（前端路由）

  随着 webpack 等技术的出现，许多东西都可以模块化并打包处理啦。
  这时就到了单页面富应用阶段，其在前后端分离的基础上加上了前端路由。
  由于各种资源（如 HTML、CSS、JS 等）都可以打包处理为一个文件，使得整个网站只有一个 HTML 页面。
  虽然只有一个 HTML 页面，但内部各种小页面的跳转关系还是要处理好的。
  此时就需要通过前端路由啦！
  简单来讲，前端路由就是在前端编写 URL 和页面间的映射关系。

  目前前端流行的三大框架，都有自己的路由实现：

  • Angular：ng Router
  • React：React Router
  • Vue：Vue Router

什么是 Vue Router?

  Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
  Vue Router 包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

Vue Router 的安装和使用

  可以在创建项目时添加 Vue Router，也可执行以下安装命令：

1
npm install vue-router --save

  之后，在项目中使用它即可：

  • ① 导入路由对象并调用

    1
    2
    3
    import VueRouter from "vue-router"

    Vue.use(VueRouter)

  • ② 创建路由实例，并且传入路由映射配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- 推荐写法：创建 router 实例时进行配置 -->
    const router = new VueRouter({
      routes: [
        { path: '/HelloWorld', component: HelloWorld }
      ]
    })

    // 也可这么写：
    // 1.定义路由映射配置
    const routes = [
      { path: '/HelloWorld', component: HelloWorld }
    ]

    // 2. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })

  • ③ 在 Vue 实例中挂载创建的路由实例

    1
    2
    3
    4
    5
    6
    import router from './router'

    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')

  • ④ 在 vue 文件中通过<router-link>和<router-view>使用

    1
    2
    3
    4
    5
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png"><br>
        <router-link to="/HelloWorld">Hello World</router-link>
        <router-view></router-view>
      </div>

  说明一下：

  • <router-link>标签是vue-router中的内置组件，它会被渲染为一个<a>标签
  • <router-view>标签会根据当前的路径，动态渲染出不同的组件
  • 网页的其他内容（如导航、页脚等）会和<router-view>处于同一级
  • 路由切换时，仅切换<router-view>挂载的组件，其他内容不会改变

路由的默认路径

  默认情况下，当用户进入网站时，我们希望<router-view>渲染首页的内容。
  但是，默认时并没有显示首页组件，必须让用户点击才能跳到首页，用户体验肯定不好。
  那么，如何让路径默认跳转到首页，让<router-view>渲染首页的内容呢？
  只需进行如下配置即可：

1
2
3
4
5
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' }
  ]
})

  上面的设置将根路径重定向到/home路径下。

动态路由

  某些情况下，一个页面的 path路径可能是不确定的，比如与不同商品，不同用户个人信息界面的path：

  • /user/10001
  • /user/10002

  可以发现，用户的 ID 是会变化的。
  而这种 path和component的匹配关系，就被称之为动态路由。
  在 Vue Router 中，可使用“动态路径参数”(dynamic segment) 来达到这个效果：

1
2
3
4
5
6
7
8
9
10
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

  在 .vue文件中，可以通过v-bind来绑定从后端换取当前用户到<router-link>中，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<router-link :to="'/user' + user.id">用户</router-link>

<script>
export default {
  name: 'App',
  data() {
  return {
    user: ''
  },
  created() {
    axios.get('/user/query')
      .then(response => this.user = response.data);
  }
  }
}
</script>

  一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
  于是，我们可以更新 User 的模板，输出当前用户的 ID：

1
2
3
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

  可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式 匹配路径 $route.params
/user/:username /user/evan { username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' }

嵌套路由

  实际生活中的应用界面，通常由多层嵌套的组件组合而成。
  同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

1
2
3
4
5
6
7
8
/user/profile                     /user/message
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

  借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const routes = [
  {
    path: '/',
    redirect: '/user'
  },
  {
    path: '/user',
    name: 'user',
    component: User,
    children: [
      {
        path: '',
        redirect: 'profile'
      },
      {
        path: 'profile',
        component: profile
      },
      {
        path: 'message',
        component: message
      }
    ]
  }
]

注意哦：以/ 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

  在相应要嵌套的User.vue路由页面使用即可：

1
2
3
4
5
6
7
<template>
  <div class="user">
    <router-link to="/user/profile">个人简介</router-link>
    <router-link to="/user/message">未读消息</router-link>
    <router-view></router-view>
  </div>
</template>

编程式的导航

  除了使用 <router-link> 创建<a> 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现该效果。

  在 Vue 实例内部，可以通过 $router 访问路由实例。
  该实例具有以下方法：

  • $router.push()：导航到不同的 URL
  • $router.replace()： 替换掉当前的 history 记录
  • $router.go(n)在 history 记录中向前或者后退 n 步

$router.push()

  其语法如下：

1
$router.push(location, onComplete?, onAbort?)

  该方法会向history栈添加一个新的记录，此时当用户点击浏览器后退按钮时，可以回到之前的 URL。

  当你点击<router-link>时，$router.push 方法会在内部被调用，所以说，以下 2 种方式等价：

方式 代码
声明式 <router-link>
编程式 $router.push(...)

  该方法的参数可以是一个字符串路径或一个描述地址的对象。例如：

1
2
3
4
5
6
7
8
9
10
11
// 字符串
$router.push('home')

// 对象
$router.push({ path: 'home' })

// 命名的路由
$router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
$router.push({ path: 'register', query: { plan: 'private' }})

  若提供了 path，params参数，其会被忽略，但上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

1
2
3
4
5
const userId = '123'
$router.push({ name: 'user', params: { userId }}) // -> /user/123
$router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
$router.push({ path: '/user', params: { userId }}) // -> /user

  同样的规则也适用于 router-link 组件的 to 属性：

1
<router-link :to="{path: '/user', query: {name: 'lisi', age: 18}}">用户</router-link>

$router.replace()

  其语法如下：

1
$router.replace(location, onComplete?, onAbort?)

  跟 $router.push 很像，但唯一不同的是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

方式 代码
声明式 <router-link :to="..." replace>
编程式 $router.replace(...)

$router.go(n)

  该方法将在 history 记录中向前或者后退 n 步，类似 window.history.go(n)。

  例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
// 在浏览器记录中前进一步，等同于 history.forward()
$router.go(1)

// 后退一步记录，等同于 history.back()
$router.go(-1)

// 前进 3 步记录
$router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
$router.go(-100)
$router.go(100)

操作 History

  你也许注意到上面 3 个方法跟window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。

  因此，若你已经熟悉 Browser History APIs，那么在 Vue Router 中操作 history 将超级简单。

  还有值得提及的，Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

导航守卫

  “导航”表示路由正在发生改变。

什么是导航守卫？

  而 Vue Router 提供的导航守卫主要用来在路由改变时做一些事情（如将页面title变化为改变的页面）。

导航守卫的种类

  导航守卫又分为以下 3 种：

  • 全局导航守卫
  • 单个路由独享的导航守卫
  • 组件导航守卫

全局导航守卫

全局前置守卫（钩子）

  可以使用 router.beforeEach 注册一个全局前置守卫：

1
2
3
4
5
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

  当一个导航触发时，全局前置守卫按照创建顺序调用。
  守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

  每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
    • next(): 进行管道中的下一个钩子。若全部钩子执行完了，则导航状态为 confirmed (确认的)
    • next(false): 中断当前的导航。若浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

注意哦：一定要调用 next 方法，否则钩子就不会被 resolved。

全局解析守卫

2.5.0 新增

  在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。
  这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子（守卫）

  也可注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

1
2
3
router.afterEach((to, from) => {
  // ...
})

单个路由独享的导航守卫

  我们可以在路由配置里直接定义某个路由独享的守卫（beforeEnter守卫）：

1
2
3
4
5
6
7
8
9
10
11
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

  这些守卫与全局前置守卫的方法参数是一样的。

组件导航守卫

  最后，你页可以在路由组件内直接定义以下的路由导航守卫：

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为在守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

  beforeRouteEnter 守卫 不能 访问 this，因为在守卫执行前，组件实例还没被创建。

  不过，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

1
2
3
4
5
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意哦： beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

1
2
3
4
5
beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

  这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

1
2
3
4
5
6
7
8
beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

组件路由缓存

  keep-alive是 Vue 内置的一个组件，可以是被包含的组件（<router-view />）保留状态，避免重新渲染。
  keep-alive有 2 个非常重要的属性：

  • include=""：""为字符串或正则表达式，只有匹配的组件会被缓存
  • exclude=""：""为字符串或正则表达式，任何匹配的组件都不会被缓存

  示例如下：

1
2
3
<keep-alive include="profile">
  <router-view/>
</keep-alive>

注意哦：若keep-alive属性默认不写，则缓存当前路由的所有组件

数据获取

  有时候，进入某个路由后，需要从服务器获取数据。
  例如，在渲染用户信息时，你需要从服务器获取用户的数据。
  我们可以通过两种方式来实现：

  • 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
  • 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

导航完成后获取数据

  当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。
  这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

  假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

在导航完成前获取数据

  通过这种方式，我们在导航转入新的路由前获取数据。
  我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

  在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。
  如果数据获取失败，同样有必要展示一些全局的错误提醒。

路由懒加载

  官方解释：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
  如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

  简单来讲，由于路由通常会定义很多不同的页面，而这些页面最终被打包到一个 JS 文件中，导致该文件非常庞大。若用户一次性从服务器请求下来这个页面，可能需要花费一定的时间（页面甚至会短暂空白）。
  为了避免该情况发生，需要使用路由懒加载，其会将路由对应的组件打包成一个个 JS 代码块，只有当该路由被访问时才加载对应的组件。

  结合 Vue 的异步组件和 Webpack 的代码分割功能，就能轻松实现路由组件的懒加载。
  首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

1
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

  第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

1
import('./Foo.vue') // 返回 Promise

注意哦：若您使用的是 Babel，需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

  结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

1
const Foo = () => import('./Foo.vue')

  在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

1
2
3
4
5
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

参考

0%